<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { showToast, showDialog } from "vant";
import { data } from "../const/data";
const animation = ref(0);

const containerDom = ref<HTMLElement | null>(null);

const finishArr = ref<Array<number>>([]);

interface typeModel {
	isActived: boolean;
	value: number;
}

const typeData = computed<Array<typeModel>>(() => {
	let result: Array<typeModel> = [];
	data.forEach((item) => {
		result.push({ isActived: false, value: item });
	});
	return result.reverse();
});

onMounted(() => {
	containerDom.value = document.querySelector(".container") as HTMLElement;
	containerDom.value.scrollTop = containerDom.value.scrollHeight;
});

const start = (): void => {
	autoScroll();
};

const autoScroll = (): void => {
	containerDom.value = containerDom.value as HTMLElement;
	if (containerDom.value.scrollTop <= 0) {
		showToast("恭喜通关！");
		cancelAnimationFrame(animation.value);
		return;
	}
	containerDom.value.scrollTop -= 1;
	animation.value = window.requestAnimationFrame(autoScroll);
};

const clickBox = (item: typeModel, index: number, current: number): void => {
	if (typeData.value.length - index === finishArr.value.length + 1 && typeData.value[typeData.value.length - finishArr.value.length - 1].value === current) {
		finishArr.value.push(item.value);
		item.isActived = true;
	} else {
		finished();
	}
};

const finished = (): void => {
	cancelAnimationFrame(animation.value);
	showDialog({
		title: "失败！",
		message: "是否重新开始游戏？",
		confirmButtonText: "重新开始",
	}).then(() => {
		reset();
	});
};

const reset = () => {
	containerDom.value = containerDom.value as HTMLElement;
	finishArr.value = [];
	containerDom.value.scrollTop = containerDom.value.scrollHeight;
	typeData.value.forEach((item) => {
		item.isActived = false;
	});
};
</script>
<template>
	<div class="container">
		<div class="scroll">
			<div class="score">
				{{ finishArr.length }}
			</div>
			<div v-for="(item, index) in typeData" :key="index" class="box-row">
				<div class="box" :class="{ active: item.value === 1, isActived: item.value === 1 && item.isActived }" @click="clickBox(item, index, 1)"></div>
				<div class="box" :class="{ active: item.value === 2, isActived: item.value === 2 && item.isActived }" @click="clickBox(item, index, 2)"></div>
				<div class="box" :class="{ active: item.value === 3, isActived: item.value === 3 && item.isActived }" @click="clickBox(item, index, 3)"></div>
				<div class="box" :class="{ active: item.value === 4, isActived: item.value === 4 && item.isActived }" @click="clickBox(item, index, 4)"></div>
			</div>
			<van-button class="start" type="primary" block @click="start()">开始</van-button>
		</div>
	</div>
</template>

<style scoped>
.container {
	width: 100vw;
	height: 100vh;
	overflow-y: hidden;
}
.score {
	position: fixed;
	top: 10px;
	right: 10px;
	font-size: 20px;
	font-weight: bold;
}
.box-row {
	height: 10vh;
	display: flex;
	flex-direction: row;
}
.box {
	flex: 1;
	height: 100%;
	border: 1px solid #eee;
}
.active {
	background-color: aqua;
	border: 1px solid black;
}
.isActived {
	background-color: cadetblue;
}
.start {
	margin-top: 16px;
	height: 10vh;
}
</style>
